<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加删除记录练习</title>
    <link rel="stylesheet" type="text/css" href="../style/css1.css" />
    <script type="text/javascript">
        function delA() {
            //点击超链接后 删除超链接所在的行 this就是点击哪个超链接就是谁
            var tr=this.parentNode.parentNode;//获取当前tr
            // var name=tr.getElementsByTagName("td")[0].innerHTML;
            var name=tr.children[0].innerHTML;
            //删除之前弹出一个对话框 取消或者确认 单击按钮一下
            var flag=confirm("确认"+name+"删除吗");
            if (flag){
                tr.parentNode.removeChild(tr);//删除tr
            }
            return false;//取消超链接的默认行为
        }
        window.onload = function(){
            //点击超链接删除按钮  删除员工信息
            var allA=document.getElementsByTagName("a");//获取所有的a
            for (var i=0;i<allA.length;i++){
                allA[i].onclick=delA;
            }
            //添加员工信息 点击按钮以后 将员工的信息添加到表格中
            var addEmpButton=document.getElementById("addEmpButton");
            addEmpButton.onclick=function () {
                var name=document.getElementById("empName").value;
                var email=document.getElementById("email").value;
                var salary=document.getElementById("salary").value;
                // alert(name+","+email+","+salary)
                //需要将获取的信息添加到tr中 格式如下
                /*<tr>
               *    <td>Jerry</td>
                *   <td>jerry@sohu.com</td>
               *    <td>8000</td>
               *    <td><a href="deleteEmp?id=002">Delete</a></td>
               * </tr>
                */
                var tr=document.createElement("tr");//创建tr
                //创建4个td
                var nameTd=document.createElement("td");
                var emailTd=document.createElement("td");
                var salaryTd=document.createElement("td");
                var aTd=document.createElement("td");
                var a=document.createElement("a");//创建a
                //创建文本节点
                var nameText=document.createTextNode(name);
                var emailText=document.createTextNode(email);
                var salaryText=document.createTextNode(salary);
                var delText=document.createTextNode("Delete");
                //把文本节点添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emailText);
                salaryTd.appendChild(salaryText);
                a.appendChild(delText);
                aTd.appendChild(a);
                //将td添加到tr中
                tr.appendChild(nameTd);
                tr.appendChild(emailTd);
                tr.appendChild(salaryTd);
                tr.appendChild(aTd);
                //向a中添加href属性
                a.href="javascript:;";
                //将tr添加到 table中
                a.onclick=delA;
                var employeeTable=document.getElementById("employeeTable");//获取table的id
                //获取tbody
                var tbody=employeeTable.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr);
            }
        };


    </script>
</head>
<body>
<script>
    /*点击按钮以后 超链接会跳转页面 这个是超链接的默认行为
     *但是此时我们不需要出现默认行为可以通过在单击响应函数的最后添加一个return false来取消
    *confirm() 带有确认或者取消的窗口 做为提示文字
    *           如果用户点击确认 true  如果点击取消 则返回false
    * for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行
    * 当响应函数执行时，for循环早已经执行完毕
   */

</script>
    * */
</script>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>

</div>

</body>
</html>
